<template>
  <div class="login-right-box">
    <el-form class="login-content">
      <div class="login-menu">
        <div
          class="login-email"
          @click="acitveComponent = 'email'"
          :class="{ active: acitveComponent == 'email' }"
        >
          短信登录
        </div>
        <div
          class="login-account"
          @click="acitveComponent = 'account'"
          :class="{ active: acitveComponent == 'account' }"
        >
          账号登录
        </div>
      </div>
      <el-form-item class="login-input-box">
        <div class="login-phone-input">
          <el-input
            v-model="phoneInput"
            class="w-50 m-2"
            placeholder="请输入手机号"
            :prefix-icon="Iphone"
            style="width: 23.55rem; height: 2.6rem"
            autofocus="true"
          />
        </div>
        <el-form-item class="login-identifying-code">
          <el-input
            v-model="identifyCodeInput"
            placeholder="请输入验证码"
            style="width: 23.55rem; height: 2.6rem"
            show-password
            :prefix-icon="Lock"
          >
            <template #append
              ><el-button @click="sendIdentifyingCode"
                >发送验证码</el-button
              ></template
            >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-button" @click="login"
            >立即登录</el-button
          >
        </el-form-item>
        <el-form-item class="login-input-box-bottom">
          <el-checkbox label="下次直接登录" class="login-checkbox" />
          <router-link to="/login" class="login-forget-password"
            >忘记密码</router-link
          >
        </el-form-item>
        <el-form-item class="login-input-box-footer">
          <div class="login-more-methods">更多登录方式</div>
        </el-form-item>
        <el-form-item>
          <div class="login-list">
            <router-link to="/login">
              <img
                src="@/img/登录页_slices/图3512@2x.png"
                class="login-wechat"
              />
            </router-link>
            <router-link to="/login">
              <img src="@/img/登录页_slices/图层3513@2x.png" class="login-qq" />
            </router-link>
            <router-link to="/login">
              <img
                src="@/img/登录页_slices/图层3514@2x.png"
                class="login-sina"
              />
            </router-link>
          </div>
        </el-form-item>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Iphone, Lock } from "@element-plus/icons-vue";
import axios from "axios";
import "@/mock/user";
import { ElMessage } from "element-plus";
import type { ResponseMessage } from "@/mock/user";
import { useRouter } from "vue-router";

const router = useRouter();
let phoneInput = ref<string>("");
let identifyCodeInput = ref<string>("");
let acitveComponent = ref<string>("email");
let sendIdentifyCodeBoolean = ref<boolean>(true);

const login = () => {
  console.log(phoneInput.value, identifyCodeInput.value);
  axios
    .post("/api/user/login", {
      userPhoneNumber: phoneInput.value,
      identifyCode: identifyCodeInput.value,
    })
    .then((res) => {
      console.log(res);
      loginVerifying(res.data);
    });
};

const loginVerifying = (data: ResponseMessage) => {
  if (data.status == -2 || data.status == -1) {
    ElMessage.error(data.msg);
  } else if (data.status == 0) {
    ElMessage({
      message: data.msg,
      type: "success",
    });
    router.push("/");
  } else {
    ElMessage(data.msg);
  }
};

const sendIdentifyingCode = () => {
  if (sendIdentifyCodeBoolean) {
    ElMessage({
      message: "验证码发送成功",
      type: "success",
    });
  }
};
</script>

<style lang="less" scope>
.login-right-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 6rem;

  .login-content {
    align-items: center;
    margin-left: 3.5rem;

    .login-menu {
      margin-bottom: 0.8rem;

      .active {
        color: #313033 !important;
      }
      .login-email {
        width: 6.29rem;
        height: 1.56rem;
        font-size: 1.56rem;
        font-weight: bold;
        color: #ccc;
        line-height: 1.56rem;
        position: relative;
        display: inline-block;
        z-index: 2;
        margin-right: 1.5rem;
        cursor: pointer;
      }
      .login-email:after {
        content: "";
        display: block;
        width: 6.29rem;
        height: 0.59rem;
        background-color: #e0d5ff;
        position: absolute;
        bottom: 0;
        z-index: -1;
      }

      .login-account {
        width: 6.29rem;
        height: 1.56rem;
        font-size: 1.56rem;
        font-weight: bold;
        color: #ccc;
        line-height: 1.56rem;
        position: relative;
        display: inline-block;
        z-index: 2;
        cursor: pointer;
      }

      .login-account::after {
        content: "";
        display: block;
        width: 6.29rem;
        height: 0.59rem;
        background-color: #e0d5ff;
        position: absolute;
        bottom: 0;
        z-index: -1;
      }
    }
    .login-input-box {
      width: 32.4rem;
      height: 25.65rem;
      border: 0.46rem solid #7d4bff;
      border-radius: 0.83rem;
      padding-top: 3.5rem;
      padding-left: 3.9rem;

      .login-identifying-code {
        .el-input-group__append {
          background-color: #7d4bff;
          font-size: 0.65rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          line-height: 0.12rem;
          cursor: pointer;
        }
      }

      .login-button {
        width: 23.65rem;
        height: 2.65rem;
        background: #7d4bff;
        border-radius: 0.33rem;
        border: none;
        font-size: 0.65rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        line-height: 2.65rem;
      }

      .login-input-box-bottom {
        width: 23.75rem;
        height: 2rem;
        line-height: 2rem;

        .login-forget-password {
          margin-left: 13.12rem;
          color: #7d4bff;
        }
      }

      .login-more-methods {
        padding: 0.66rem 9.5rem;
        font-size: 0.8rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #313033;
        line-height: 0.8rem;
        border-bottom: 0.18rem solid #ccc;
      }
      .login-list {
        display: flex;
        justify-content: space-evenly;
        width: 23.75rem;
        height: 2.5rem;

        .login-wechat {
          width: 2.1rem;
          height: 2.08rem;
        }

        .login-qq {
          width: 1.96rem;
          height: 2.33rem;
        }

        .login-sina {
          width: 2.04rem;
          height: 2.25rem;
        }
      }
    }
  }
}
</style>
